<template>
    <div>
        <Header/>
        
        <div class="wrapper">
            <div class="menu">
                <router-link to="/setting/holidayset">Holiday Set</router-link>
                <router-link to="/setting/timeset">Time Set</router-link>
                <router-link to="/setting/changepassword">Change Password</router-link>
            </div>
            <transition name="el-fade-in" mode="out-in">
                <router-view/>
            </transition>
        </div>
    </div>
</template>

<script>
    import Header from '@/components/Header'

    export default {
        name: 'Setting',
        components: {
            Header
        },
        created() {
            document.body.style.background = '#F0F2F5'
        },
        destroyed() {
            document.body.style.background = '#fff'
        }
    }
</script>

<style scoped>
    .wrapper {padding: 25px 0; overflow: hidden;}
    .menu {width: 208px; height: 462px; background: #fff; border-radius: 4px; float: left; overflow: hidden;}
    .menu a {height: 58px; line-height: 58px; display: block; color: #000; font-size: 18px; text-align: center;}
    .menu a.router-link-active {background: #4D84FC; color: #fff;}
</style>